<template>
  <div class="audioList">
    <el-card>
      <aplayer :music="audio[0]" :list="audio"/>
    </el-card>
    <el-table v-show="false"
              :data="tableData"
              style="width: 1000px;margin: 0 auto;">
      <el-table-column
          width="180">
        <template slot-scope="scope">
          <div class="demo-image">
            <div class="block">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.img">
              </el-image>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span class="font-small">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span class="font-small">{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <el-button type="primary">播放</el-button>
        <el-button type="primary">暂停</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>


import aplayer from "vue-aplayer";


export default {
  name: "AudioList",
  created() {
    //book_id
    this.id = this.$route.query.audioId
    this.getRequest('/p/pms/book/audios/' + this.id).then(res => {
      console.log(res)
      this.audio = []
      res.data.audios.sort((x, y) => y.sort - x.sort).map(item => {

        let obj = {}
        obj.title = item.file.fileName
        obj.url = this.$store.state.baseImgUrl + item.file.store
        // obj.src = this.$store.state.baseImgUrl + item.file.store

        obj.artist = '不详'
        obj.pic = this.$store.state.baseImgUrl + res.data.book.img
        obj.lrc = '[00:00.00] 暂无音频歌词'
        this.audio.push(obj)
        // this.audio = obj
      })
    })
  },
  data() {
    return {
      id: null,
      audio: [
        {
          title: '默认音频',
          artist: '黄叶',
          url: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
          pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720200713203148.jpg',
          lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh',
        }
      ],
      tableData: [{
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        name: '王小虎',
        description: '上海市普陀区金沙江路 1518 号'
      }],
    }
  },
  components: {
    aplayer
  }
}
</script>

<style scoped>
  .audioList{
    margin-top: 50px;
    padding-bottom: 250px;
  }
</style>